﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .ibox {
            margin-bottom: 0px;
        }

        /*.ibox-content {
            padding: 15px 20px 0px 20px;
        }*/
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>广告</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-10">
                        <div class="btn-group">
                            <button id="insertBtn" type="button" class="btn btn-outline btn-default" title="添加">
                                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                            </button>
                            <button id="editBtn" type="button" class="btn btn-outline btn-default" title="编辑">
                                <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                            </button>
                            <button id="deleteBtn" type="button" class="btn btn-outline btn-default" title="删除">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            </button> 
                            <button id="refreshBtn" type="button" class="btn btn-outline btn-default" title="刷新">
                                <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="input-group">
                            <input id="searchKey" type="text" class="form-control" placeholder="请输入要搜索的内容...">
                            <span class="input-group-btn">
                                <button id="searchBtn" type="button" class="btn btn-primary">
                                    搜索
                                </button>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row row-lg">
                    <div class="col-sm-12">
                        <table id="table"></table>
                    </div>
                </div>
            </div>
        </div>
        @* 用来传递消息的隐藏域 *@
        <input id="handle_status" value="" hidden="hidden">
    </div>


    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script type="text/javascript" src="~/Scripts/content.js?v=1.0.0"></script>
    <!-- Bootstrap table -->
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>
     <script type="text/javascript">
         $(function () {
             initTable();
         });
         var $table = $('#table');
         function initTable() {
             $table.bootstrapTable({
                 url: '/Advertisement/IndexAsync',            //数据来源地址
                 method: 'post',                     //数据请求方式
                 striped: true,                      //是否显示行间隔色
                 cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                 pagination: true,                   //是否启用分页
                 sidePagination: 'server',           //在服务器端分页
                 queryParams: queryParams,           //传递参数
                 pageNumber: 1,                      //初始化加载第一页，默认第一页
                 pageSize: 20,                       //每页的记录行数（*）
                 pageList: [10, 20, 30, 40, 50],     //可供选择的每页的行数（*）
                 clickToSelect: true,                //是否启用点击选中行
                 //toolbar: "#tableToolBar",
                 height: getHeight(),
                 columns: [{
                     width: 38,
                     field: 'selected',
                     checkbox: true,
                 }, {
                     title: '行号',
                     align: 'center',
                     width:50,
                     formatter: function (value, row, index) { return index + 1; }
                 }, {
                     field: 'moduleID',
                     title: '模块',
                     align: 'center'
                 }, {
                     field: 'dynamicID',
                     title: '动态',
                     align: 'center'
                 }, {
                     field: 'text',
                     title: '广告内容',
                     align: 'center'
                 }, {
                     field: 'advertisementType',
                     title: '广告类型',
                     align: 'center'
                 }, {
                     title: '图片管理',
                     align: 'center',
                     formatter: PictureManagementFormatter 
                 }
                 //,{
                 //    field: 'name',
                 //    title: '角色名称',
                 //    align: 'center'
                 //}, {
                 //    field: 'name',
                 //    title: '角色名称',
                 //    align: 'center'
                 //, { 
                 //    title: '可选操作',
                 //    align: 'center',
                 //    events: operateEvents,
                 //    formatter: operateFormatter
                 //}
                 ]
             });
         }

         //查询的参数
         var queryParams = function (params) {
             var temp = {
                 pageSize: params.limit,                             //行数
                 pageIndex: (params.offset / params.limit) + 1,      //页码
                 search: $('#searchKey').val()                       //查询内容
             };
             console.info(temp);
             return temp;
         };

         //刷新表格数据
         var refreshTable = function () {
             $table.bootstrapTable('refresh');
         }

         //自定义的列事件
         function operateFormatter(value, row, index) {
             return [
                 '<a class="edit" href="javascript:void(0)" title="编辑">',
                 '<i class="glyphicon glyphicon-edit"></i>',
                 '</a>  ',
                 '<a class="remove" href="javascript:void(0)" title="删除">',
                 '<i class="glyphicon glyphicon-remove"></i>',
                 '</a>'
             ].join('');
         }

         window.operateEvents = {
             'click .edit': function (e, value, row, index) {
                 editData(row.id);
             },
             'click .remove': function (e, value, row, index) {
                 Delete(row.id);
             }
         };


         function isTrueFormatter(value, row, index) {
             return value ? '<i class="glyphicon glyphicon-ok"></i>' : '<i class="glyphicon glyphicon-remove"></i>'
         }

         //获取表格高度
         function getHeight() {
             return $(window).height() - 150;
         }

         //重置表格高度
         setTimeout(function () {
             $table.bootstrapTable('resetView');
         }, 200);

         //重置表格高度
         $(window).resize(function () {
             $table.bootstrapTable('resetView', {
                 height: getHeight()
             });
         });

         //刷新按钮
         $('#refreshBtn').click(function (e) {
             $table.bootstrapTable('refresh');
         });

         //搜索按钮
         $('#searchBtn').click(function (e) {
             $table.bootstrapTable('refresh');
         });

         //图片管理
         function PictureManagementFormatter(value, row, index) {
             return [
                 '<a class="kv-file-zoom btn btn-xs btn-primary" href="javascript:void(0)"  onclick="PictureManagementeditData(' + row.id + ')">',
                 '图片管理',
                 '</a>  ',
             ].join('');
         }
         function PictureManagementeditData(id) {
             parent.layer.open({
                 type: 2,
                 title: "相册",
                 shadeClose: false,
                 shade: 0.4,
                 area: ["960px", "820px"],
                 content: '/Images/Index?GroupID=' + 11 + '&InterfixID=' + id + '&ImageType=' + 1,
                 end: function () {
                     refreshTable();
                 }
             });
         }

         //插入按钮
         $('#insertBtn').click(function (e) {
             parent.layer.open({
                 type: 2,
                 title: '添加广告',
                 shadeClose: false,
                 shade: 0.4,
                 area: ['700px', '365px'],
                 content: '/Advertisement/Insert',
                 end: function () {
                     refreshTable();
                 }
             });
         });

         //编辑按钮
         $('#editBtn').click(function (e) {
             var selected = $table.bootstrapTable('getSelections');

             if (selected.length > 1) {
                 layer.msg("一次只能修改一条数据！", { icon: 5, time: 2000 });
                 return;
             }

             if (selected.length == 0) {
                 layer.msg("请选择您要修改的数据！", { icon: 5, time: 2000 });
                 return;
             }
             editData(selected[0].id);
         });

         //打开编辑窗口
         function editData(id) {
             parent.layer.open({
                 type: 2,
                 title: '修改广告',
                 shadeClose: true,
                 shade: 0.4,
                 area: ['700px', '365px'],
                 content: '/Advertisement/Edit?id=' + id,
                 end: function () {
                     refreshTable();
                 }
             });
         }

         //删除按钮
         $('#deleteBtn').click(function (e) {
             var selected = $table.bootstrapTable('getSelections');
             if (selected.length == 0) {
                 layer.msg("请选择您要删除的数据！", { icon: 5, time: 2000 });
                 return;
             }

             var arr = [];
             for (var i = 0; i < selected.length; i++) {
                 arr.push(selected[i].id);
             }

             var ids = arr.join(",");
             Delete(ids);
         });
         function Delete(ids) {
             layer.confirm('您确定要删除所选数据吗', {
                 btn: ['是的', '取消'] //按钮
             }, function () {
                 $.ajax({
                     url: '/Advertisement/DeleteAsync',
                     type: "post",
                     dataType: "json",
                     data: { ids: ids },
                     success: function (data) {
                         //Info,Success,Warning,Error
                         var type = data.type;
                         if (type == 1) {
                             layer.msg(data.content,
                                 {
                                     icon: 6, time: 2000
                                 },
                                 function () {
                                     refreshTable();
                                 });
                         } else {
                             layer.msg(data.content, { icon: 5, time: 2000 });
                         }
                     }
                 });
             }, function () {
                 return;
             });
         }
     </script>

</body>
</html>
